<template>
    <div class="common-details">
        <div class="common-tabs">
            <div @click="changeTab(0)" class="common-tabs-child" :class="{active: currentTab === 0}">基本信息</div>
            <div @click="changeTab(1)" class="common-tabs-child" :class="{active: currentTab === 1}">学校链接信息</div>
            <div @click="changeTab(2)" class="common-tabs-child" :class="{active: currentTab === 2}">学校分数线</div>
            <div @click="changeTab(3)" class="common-tabs-child" :class="{active: currentTab === 3}">征集志愿分数线</div>
        </div>
        <div class="common-details-wrap">
            <el-form v-if="currentTab === 0" ref="commonForm" :model="addObj"  class="common-form" label-position="left">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item label="院校名称">
                            <el-input v-model="addObj.yxmc"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="密码">
                            <el-input type="password" v-model="addObj.password"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="手动排序">
                            <el-input v-model="addObj.sort"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="角色">
                            <el-select v-model="addObj.role">
                                <el-option v-for="item in jslxList" :key="item.code" :label="item.name" :value="item.code"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="招生代码">
                            <el-input v-model="addObj.zsdm"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="院校类型">
                            <el-select v-model="addObj.yxlx">
                                <el-option v-for="item in yxlxList" :key="item.code" :label="item.name" :value="item.code"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="所属地区">
                            <el-select v-model="addObj.ssdq">
                                <el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.code"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="国家重点学科">
                            <el-input v-model="addObj.zdxk"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="教育部直属">
                            <el-select v-model="addObj.jybzs">
                                <el-option v-for="item in whetherDict" :key="item.code" :label="item.name" :value="item.code"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="211院校">
                            <el-select v-model="addObj.eyyyx">
                                <el-option v-for="item in whetherDict" :key="item.code" :label="item.name" :value="item.code"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="985院校">
                            <el-select v-model="addObj.jbwyx">
                                <el-option v-for="item in whetherDict" :key="item.code" :label="item.name" :value="item.code"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="自主招生院校">
                            <el-select v-model="addObj.zzzsyx">
                                <el-option v-for="item in whetherDict" :key="item.code" :label="item.name" :value="item.code"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="硕士点">
                            <el-input v-model="addObj.ssd"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="博士点">
                            <el-input v-model="addObj.bsd"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="建校时间">
                            <el-date-picker
                                    v-model="addObj.jxsj"
                                    type="year"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="主管部门">
                            <el-input v-model="addObj.zgbm"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="两院院士">
                            <el-input v-model="addObj.lyys"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="图书馆藏书">
                            <el-input v-model="addObj.tsgcs"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="办学地点">
                            <el-input v-model="addObj.bxdd"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="邮政编码">
                            <el-input v-model="addObj.yzbm"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="联系人">
                            <el-input v-model="addObj.lxr"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="咨询电话">
                            <el-input v-model="addObj.zxdh"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="传真">
                            <el-input v-model="addObj.cz"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="邮件">
                            <el-input v-model="addObj.yj"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="20">
                        <el-form-item label="院校主页">
                            <el-input v-model="addObj.yxzy"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="链接颜色">
                            <el-select v-model="addObj.ljys">
                                <el-option v-for="item in colorList" :key="item.code" :label="item.name" :value="item.code"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="学校校徽">
                            <el-upload
                                    class="avatar-uploader"
                                    action=""
                                    :show-file-list="false"
                            >
                                <img v-if="addObj.xxxh" :src="addObj.xxxh" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="其他信息">
                            <el-input type="textarea" :rows="6" v-model="addObj.qtxx"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="备注">
                            <el-input type="textarea" :rows="6" v-model="addObj.bz"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div v-if="currentTab === 1" class="school-link">
                <!--                <div class="show-state">-->
                <!--                    <div class="label">学校链接信息显示状态：</div>-->
                <!--                    <div class="content-s">-->
                <!--                        <el-input v-model="xxzt"></el-input>-->
                <!--                    </div>-->
                <!--                </div>-->
                <div class="show-state">
                    <div class="label">学校链接信息列表：</div>
                    <div class="content-s">
                        <el-table :data="linkList" border stripe style="width: 100%">
                            <el-table-column label="排序" width="100px">
                                <template #default="scope">
                                    <el-input @change="changeSort(scope)" type="number" v-model="scope.row.sort"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="链接内容">
                                <template #default="scope">
                                    <el-input v-model="scope.row.name"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="130px">
                                <template #default="scope">
                                    <el-button size="small" text type="primary" @click="addLink">新增</el-button>
                                    <el-button size="small" text type="danger" @click="deleteLink(scope)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            <div class="school-score" v-if="currentTab === 2">
                <div class="common-tab-content">
                    <div class="query-table-page">
                        <div class="query-box">
                            <el-form :inline="true" :model="formObj" class="common-query-form">
                                <el-form-item label="年度">
                                    <el-date-picker
                                            v-model="formObj.date"
                                            type="year"
                                            placeholder="请选择年度"
                                    />
                                </el-form-item>
                                <el-form-item>
                                    <el-button :loading="loading" type="primary" @click="queryFn">查询</el-button>
                                    <el-button :loading="loading" type="primary" @click="initFn">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="table-box">
                            <div class="table-list">
                                <el-table :key="tbKey" ref="commonTable" :data="tableData" border stripe style="width: 100%" height="620px">
                                    <el-table-column type="index" label="序号" width="60"/>
                                    <el-table-column prop="nf" label="年份"/>
                                    <el-table-column prop="pc" label="批次" />
                                    <el-table-column prop="xtdx" label="校调档线" />
                                    <el-table-column prop="sxxrs" label="上校线人数" />
                                    <el-table-column prop="xjhs" label="校计划数" />
                                    <el-table-column prop="xbms" label="校报名数" />
                                    <el-table-column prop="xlqs" label="校录取数" />
                                    <el-table-column prop="zgf" label="最高分" />
                                    <el-table-column prop="zdf" label="最低分" />
                                    <el-table-column prop="pjf" label="平均分" />
                                </el-table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="school-score" v-if="currentTab === 3">
                <div class="common-tab-content">
                    <div class="query-table-page">
                        <div class="query-box">
                            <el-form :inline="true" :model="formObj" class="common-query-form">
                                <el-form-item label="年度">
                                    <el-date-picker
                                            v-model="formObj.date"
                                            type="year"
                                            placeholder="请选择年度"
                                    />
                                </el-form-item>
                                <el-form-item>
                                    <el-button :loading="loading" type="primary" @click="queryFn">查询</el-button>
                                    <el-button :loading="loading" type="primary" @click="initFn">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="table-box">
                            <div class="table-list">
                                <el-table :key="tbKey" ref="commonTable" :data="tableData2" border stripe style="width: 100%" height="620px">
                                    <el-table-column type="index" label="序号" width="60"/>
                                    <el-table-column prop="nf" label="年份"/>
                                    <el-table-column prop="pc" label="批次" />
                                    <el-table-column prop="zjzyrs" label="征集志愿人数" />
                                    <el-table-column prop="zjzyfs" label="征集志愿分数" />
                                </el-table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="school-btn" v-if="currentTab === 0 || currentTab === 1">
                <el-button size="large" @click="backToParent">取消</el-button>
                <el-button size="large" type="primary" @click="saveInfo">保存</el-button>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import CommonTitle from "@/components/common-title.vue"
import {ref, onMounted, onBeforeUnmount, reactive} from "vue"
import {cityList, colorList, jslxList, lmList, whetherDict, yxlxList} from "@/utils/dict";
import whdxImg from '@/assets/img//whdx.png'
import {Edit, Plus} from "@element-plus/icons-vue";
import {useRoute} from "vue-router"
import router from "@/router";
import {$msg} from "@/utils";
const currentTab = ref(0)
function changeTab(index) {
    currentTab.value = index
}
const addObj = ref({
    yxmc: '武汉大学',
    password: '7686756758789067',
    sort: '1',
    role: '1',
    zsdm: 'A141',
    yxlx: '101',
    ssdq: '420100',
    zdxk: '22 个，5个一级学科被认定为国家重点学科，17 个二级学科被认定为国家重点学科',
    jybzs: '1',
    eyyyx: '1',
    jbwyx: '1',
    zzzsyx: '1',
    ssd: '296',
    bsd: '208',
    jxsj: '1983',
    lyys: '5位中国科学院院士、8位中国工程院院士',
    tsgcs: '1111 万余册，印刷型文献已近629.9万册，中外文电子书刊452.7万余册；线装古籍17万余册，有300多种收入《中国古籍善本书目》， 48种入选《国家珍贵古籍名录》。',
    zgbm: '教育部',
    bxdd: '湖北省武汉市武昌珞珈山',
    yzbm: '430072',
    lxr: '彭老师',
    zxdh: '02768754231',
    cz: '027-68752150',
    yj: 'wdzsb@whu.edu.cn',
    yxzy: 'http://www.whu.edu.cn',
    ljys: '1',
    xxxh: whdxImg,
    qtxx: '',
    bz: '原武水武测湖北医大并入此校'
})
const xxzt = ref('')
const loading = ref(false)
const route = useRoute()
const isDisabled = ref(false)
const formObj = reactive({
    user: '',
    region: '',
    type: '',
    date: ''
})
const tableData = ref([])
const tableData2 = ref([])
const linkList = ref([
    {sort: 1, name: '招生代码：C231'},
    {sort: 2, name: '招生代码：C134'},
])
function backToParent(){
    router.push('/schools')
}
function saveInfo(){
    $msg({
        type: 'success',
        message: '保存成功'
    })
}
function addLink(){
    linkList.value.push({sort: linkList.value.length + 1, name: ''})
}
function deleteLink(scope){
    linkList.value = linkList.value.filter(item => item !== scope.row)
}
function changeSort(scope){
    linkList.value = linkList.value.sort((a, b) => a.sort - b.sort)
}
function queryFn() {
    loading.value = true
    setTimeout(() => {
        loading.value = false
    }, 1500)
}
const initFn = () => {
    loading.value = true
    formObj.value = {
        user: '',
        region: '',
        type: '',
        date: ''
    }
    setTimeout(() => {
        loading.value = false
    }, 1500)
}
onMounted(() => {
    if(route.query.type === 'add'){
        addObj.value = {
            yxmc: '',
            password: '',
            sort: '',
            role: '',
            zsdm: '',
            yxlx: '',
            ssdq: '',
            zdxk: '',
            jybzs: '',
            eyyyx: '',
            jbwyx: '',
            zzzsyx: '',
            ssd: '',
            bsd: '',
            jxsj: '',
            lyys: '',
            tsgcs: '',
            zgbm: '',
            bxdd: '',
            yzbm: '',
            lxr: '',
            zxdh: '',
            cz: '',
            yj: '',
            yxzy: '',
            ljys: '',
            xxxh: '',
            qtxx: '',
            bz: ''
        }
        isDisabled.value = false
    }else if(route.query.type === 'edit'){
        isDisabled.value = false
    }else {
        isDisabled.value = true
    }
    for (let i = 0; i < 20; i++) {
        tableData.value.push({
            nf: '2021',
            pc: '一批次',
            xtdx: '543',
            sxxrs: '1002',
            xjhs: '1000',
            xbms: '2000',
            xlqs: '1000',
            zgf: '690',
            zdf: '590',
            pjf: '600'
        })
        tableData2.value.push({
            nf: '2021',
            pc: '一批次',
            zjzyrs: '543',
            zjzyfs: '1002',
        })
    }
})
onBeforeUnmount(() => {

})
</script>
<style scoped lang="less">
.common-details {
    padding: 12px;
    .common-details-wrap{
        padding: 12px;
        margin-top: 16px;
        background: #fff;
        .common-form{
            padding: 30px 0;
        }
        .school-link{
            width: 800px;
            .show-state{
                display: flex;
                margin-bottom: 20px;
                justify-content: space-between;
                .label{
                    width: 200px;
                    text-align: right;
                }
                .content-s{
                    flex: 1;
                }
            }
        }
        .school-btn{
            margin-top: 20px;
            display: flex;
            justify-content: center;
        }
    }
}
.avatar-uploader .avatar {
    width: 80px;
    height: 80px;
    display: block;
}
.avatar-uploader {
    ::v-deep .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
        &:hover {
            border-color: var(--el-color-primary);
        }
    }
    ::v-deep .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 80px;
        height: 80px;
        text-align: center;
    }
}
</style>